<!--
 * @Author: Islands 1430536748@qq.com
 * @Date: 2024-07-16 23:08:40
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-08-23 00:18:21
 * @version: 1.2.0
 * @Description: Dropdown 下拉菜单+Button 组合组件
-->
<script setup lang="ts">
import { props } from '../props';
import {SvgIcon} from '../../../SvgIcon'
const { icon, link,text, options, onClick } = defineProps(props);
</script>
<template>
    <el-dropdown @command="onClick">
        <el-button :link="link" style="outline: none;">
            <template #icon>
                <SvgIcon :icon="icon" :size="size" />
            </template>
            {{ text }}
        </el-button>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="item in options" :command="item">
                    <div class="flex flex-justify-between flex-items-center">
                        <SvgIcon :icon="item.icon" size="2em" />
                        <span style="padding-left: 2px;" class="font-size-4">
                            {{ item.label }}
                        </span>
                    </div>
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
<style scoped lang="scss">
:deep(.el-icon){
    font-size: 28px;
}
</style>